const { default: styled } = require("styled-components");

const SongWarrper = styled.div`
user-select: none;
    position: relative;
    &:hover .leftbtn,&:hover .rightbtn{
        color: rgb(164,164,164);
    }
  .leftbtn {
    position: absolute;
    top: 50%;
    left: -30px;
    z-index: 100;
    font-size: 30px;
    color: transparent;
    cursor: pointer;
    &:hover{
        color: rgb(30, 206, 156);
    }
  }
  .rightbtn {
    position: absolute;
    top: 50%;
    z-index: 100;
    right: -30px;
    font-size: 30px;
    color: transparent;
    cursor: pointer;
    &:hover{
        color: rgb(30, 206, 156);
    }
  }
.main{
  margin: 30px 0px;
  height: 300px;
  overflow: hidden;
  white-space: nowrap;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    .more{
        cursor: pointer;
        &:hover{
            color: rgb(30, 206, 156);
        }
    }
    .title {
      font-size: 25px;
      display: flex;
      align-items: center;
      .title_detail {
        font-size: 15px;
        margin-left: 20px;
        color: gray;
      }
    }
  }
  .body {
    /* background-color: red; */
    position: relative;
    display: flex;
    height: 100px;
    transition: all 0.3s;
    transform: translateX(${(props) => props.transX}px);
  }
}
`;

export default SongWarrper;
